<template>
  <div>
    <el-table :data="tableData" stripe style="width: 100%" row-class-name="custom-row">
      <el-table-column prop="id" label="编码" class-name="cell-style"> </el-table-column>
      <el-table-column prop="title" label="菜单名称" class-name="cell-style"> </el-table-column>
      <el-table-column prop="prentId" label="菜单级别" class-name="cell-style">
        <template slot-scope="scope">
          <span>
            <span v-if="scope.row.prentId == 0"> 一级菜单</span>
            <span v-else> 二级菜单</span>
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="desc" label="菜单描述" class-name="cell-style"> </el-table-column>
      <el-table-column label="操作" width="200" class-name="cell-style">
        <template slot-scope="scope">
          <el-tag @click="handleClick(scope.row.id)" class="buttn">
            <i class="el-icon-zoom-in"></i>查看下一级</el-tag
          >
        </template>
      </el-table-column>
    </el-table>
    <Pagination
        :componentTotal="activityTotal"
        :page="tasklisForm.page"
        @changeRows="setRows"
        @changePage="setPage"
      >
      </Pagination>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination";
export default {
  components: { Pagination },
  data() {
    return {
      tasklisForm: {
        limit: 10,
        page: 1,
      },
      activityTotal: 0,
      tableData: [],
    };
  },
  methods: {
    // 分页器
    setRows(val) {
      this.tasklisForm.limit = val;
      this.getMenuData();
    },
    setPage(val) {
      this.tasklisForm.page = val;
      this.getMenuData();
    },
    handleClick(id) {
      this.$router.push({ name: 'menuDatachild', params: { id } });
    },
    async getMenuData() {
      try {
        const { data: res } = await this.axios.get(
          `admin/getMenuData?prentId=0&currPage=${this.tasklisForm.page - 1}&pageNum=${this.tasklisForm.limit}`
        );
        console.log(res);
        this.tableData = res.data;
        this.activityTotal = res.total;
      } catch (error) {
        console.error(error);
        this.$message.error("请求失败: " + error.message);
      }
    },
  },
  mounted() {
    this.getMenuData();
  },
};
</script>

<style>
.buttn {
  color: #fff;
  font-size: 12px;
  background-color: #20a0ff;
  border-color: #20a0ff;
}

.custom-row {
  height: 45px;
}

.cell-style {
  font-weight: bold;
  text-align: center;
}
</style>